<template>
	<div class="page has-navbar resetPassword" v-nav="{hideNavbar: true}">
		<div class="top"></div>
		<form action="">
			<div class="von-input-wrapper" style="margin-bottom: 0.2rem;">
			    <label class="item item-borderless item-input von-input">
			        <div class="hairline-top"></div> <span class="input-label">用户名</span>
			        <input type="tel" placeholder="请输入手机号" v-model="phone">
			        <div class="hairline-bottom"></div>
			    </label> 
			    <span class="input-clear"></span>
			</div>
			<div class="codeBox clearfix">
				<div class="von-input-wrapper codeInput">
				    <label class="item item-borderless item-input von-input">
				        <div class="hairline-top"></div> <span class="input-label">验证码</span>
				        <input type="password" placeholder="请输入验证码" v-model="code">
				        <div class="hairline-bottom"></div>
				    </label> 
				    <span class="input-clear"></span>
				</div>
				<md-button class="codeBtn button left" :class="{'button-calm':!isGetCode, 'button-royal':isGetCode }" @click.native="getCode()" v-text="isGetCode?time+'s':'获取验证码'">
				    
				</md-button>
			</div>
			<div class="von-input-wrapper">
			    <label class="item item-borderless item-input von-input">
			        <div class="hairline-top"></div> <span class="input-label">密码</span>
			        <input type="password" placeholder="请输入新密码" v-model="password">
			        <div class="hairline-bottom"></div>
			    </label> 
			    <span class="input-clear"></span>
			</div>
			<md-button class="confirmBtn button button-positive button-block" @click.native="changePW()">
			    确认修改
			</md-button>
		</form>
	</div>
</template>

<script type="text/javascript">
import {API_BASE_URL} from "./../../urlConfig/index";
export default {
	data(){
		return{
			phone: '',
			password: '',
			code: '',
			time: 60,

			isGetCode: false,
		}
	},
	methods: {
		getCode: function () {
		    if ( (/^1[3|4|5|6|7|8|9][0-9]{9}$/).test(this.phone) ) {
		        this.isGetCode = true;
		        this.$http.post(API_BASE_URL+'v1/verify-code?mobile='+this.phone+'&type=ACCOUNT').then((res)=>{
		            let intervalCode = setInterval(()=>{
		                this.time--;
		                if ( this.time <= 0 ) {
		                    this.isGetCode = false;
		                    this.time = 60;
		                    clearInterval(intervalCode);
		                }
		            }, 1000);
		        }).catch((err)=>{
		            this.isGetCode = false;
		        })
		    } else {
		        $toast.show('请输入正确的手机号', 2000).then(() => {});
		        return;                   
		    }
		},
		changePW: function () {
		    if ( !(/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.phone)) ) {
		        $toast.show('请输入正确的手机号', 2000).then(() => {});
		        return;   
		    }
		    if ( !this.code || this.code.length !== 4 ) {
		        $toast.show('请填写正确的验证码', 2000).then(() => {});
		        return;
		    }
		    if ( !this.password ) {
		        $toast.show('请输入密码', 2000).then(() => {});
		        return;
		    }
	        let resetData = {
	            "mobile": this.phone,
	            "verifyCode": this.code,
	            "pwd": this.password
	        }
	        this.$http.post('reset-pwd', resetData).then((res)=>{

	            $toast.show('重置成功', 2000).then(() => {});
	            this.$router.forward('login');

	        }).catch((err)=>{
	            
	        })
		},
	},
	mounted(){

  	}
}
</script>
<style lang="scss" scoped>
	@import "resetPassword";
</style>
